<!DOCTYPE html>
<html>
<head>
<title>Contact list</title>
<!-- Bootstrap -->
<!--link href="css/bootstrap.min.css" rel="stylesheet" media="screen"-->
<!--link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"-->
<link
	href="../../AddressBookServer/AddressBookServer/apps/db/static/css/bootstrap.css"
	rel="stylesheet"
	media="screen">
<link
	href="../../AddressBookServer/AddressBookServer/apps/db/static/css/bootstrap-responsive.css"
	rel="stylesheet"
	media="screen">
<link
	href="../../AddressBookServer/AddressBookServer/apps/db/static/css/listbox.css"
	rel="stylesheet">
</head>
<body>
	<div class="container-fluid">
		<h3>
			<em>Your address book</em>
		</h3>
		<div class="row-fluid">
			<!--Side bar-->
			<div class="span4">
				<div class="btn-group">
					<button
						class="btn btn-success"
						onclick="createNewContact()">New contact</button>
					<button class="btn btn-danger">Delete contact</button>
				</div>
				<select id="contacts_list">
					<option value="1">Archi</option>
					<option value="2">Valery</option>
					<option value="3">John</option>
					<option value="4">Thomas</option>
					<option value="5">Andrew</option>
					<option value="6">Arnold</option>
					<option value="7">Valera</option>
					<option value="8">Josh</option>
					<option value="9">Terry</option>
					<option value="10">Ann</option>
					<option value="11">Arthur</option>
					<option value="12">Vadim</option>
					<option value="13">Jeffry</option>
					<option value="14">Tuve</option>
				</select>
			</div>
			<!--Contact edit-->
			<div class="span8">
				<form>
					<fieldset>
						<legend id="Contact_id"></legend>
						<label>Name</label>
						<input
							id="Profile_Name"
							type="text"
							placeholder="Name">
						<label>Surname</label>
						<input
							id="Profile_Surname"
							type="text"
							placeholder="Surname">
						<label>Birthday</label>
						<input
							id="Profile_Date"
							type="date"
							value="2013-01-08">
						<label>Mobile Phone #</label>
						<input
							id="Profile_MP"
							type="text"
							placeholder="Mobile #">
						<label
							class="checkbox inline"
							onclick="addHomeNumber()">
							<input
								type="checkbox"
								id="Profile_inlineCheckbox1"
								value="Profile_HP_checkbox"> Home phone #
						</label>
						<label
							class="checkbox inline"
							onclick="addWorkNumber()">
							<input
								type="checkbox"
								id="Profile_inlineCheckbox2"
								value="Profile_WP_checkbox"> Work phone #
						</label>
						<label id="Profile_HPtext">Home Phone #</label>
						<input
							id="Profile_HP"
							type="text"
							placeholder="Home #">
						<label id="Profile_WPtext">Work Phone #</label>
						<input
							id="Profile_WP"
							type="text"
							placeholder="Work #">
						<label>Country</label>
						<input
							id="Profile_Country"
							type="text"
							placeholder="Country">
					</fieldset>
				</form>
				<button
					class="btn btn-small btn-primary"
					type="button">Save</button>
			</div>
		</div>
	</div>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/listbox.js"></script>
	<script src="js/contactlist.js"></script>
	<script>
		$(function() {
			$('select').listbox({
				'class' : 'class',
				'searchbar' : true, // отображать строку поиска
				'multiselect' : false // не использовать множественный выбор
			})
		})
	</script>
</body>
</html>